<template>

  <div style="margin-bottom: 10px">
  <el-button type="warning" @click="freezeUsers">批量冻结</el-button>
  <el-button type="primary" @click="unfreezeUsers">批量解冻</el-button>
  <el-button type="danger" @click="deleteUsers">批量删除</el-button>
    <el-input style="width: 200px;margin-left: 10px" placeholder="请输入用户名:" v-model="user.username"></el-input>
    <el-input style="width: 200px;margin-left: 10px" placeholder="请输入手机号:" v-model="user.phone"></el-input>
    <el-input style="width: 200px;margin-left: 10px" placeholder="请输入邮箱 :" v-model="user.email"></el-input>
    <el-button type="primary" style="margin-left: 10px" @click="userPage">确定</el-button>
    <el-button type="warning" style="margin-left: 10px" @click="reset">重置</el-button>
  </div>
  <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="selected"
  >
    <el-table-column type="selection" width="55"/>
    <el-table-column label="用户名" width="120" prop="username"/>
    <el-table-column label="手机号" width="120" prop="phone"/>
    <el-table-column label="邮箱" width="180" prop="email"/>
    <el-table-column label="存储空间" width="120" prop="storageSize">
      <template #default="scope">
        <span @click="beforeChangeUserStorageSize(scope.row)" class="click">{{ showSize(scope.row.storageSize) }}</span>
      </template>
    </el-table-column>
    <el-table-column label="状态" prop="status">
      <template #default="scope">
        <el-tag :type="scope.row.status === '正常' ? 'success':'danger'">
          {{scope.row.status}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="创建时间" width="200" prop="createTime"/>
    <el-table-column label="更新时间" width="200" prop="updateTime"/>
    <el-table-column label="操作" width="500" fixed="right">
      <template #default="scope">
      <el-button v-if="scope.row.status === '正常'" type="danger" @click="freezeUser(scope.row.id)">冻结</el-button>
      <el-button v-else type="success" @click="unFreezeUser(scope.row.id)">解冻</el-button>
      <el-button type="warning" @click="deleteUser(scope.row.id)">删除</el-button>
      <el-button type="primary" @click="resetPassword(scope.row.id)">重置密码</el-button>
      <el-button type="primary" @click="freezeUserDocuments(scope.row.id)">冻结文档</el-button>
      <el-button type="primary" @click="unFreezeUserDocuments(scope.row.id)">解冻文档</el-button>
    </template></el-table-column>
  </el-table>

  <div class="change-user-storage-size">
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
    >
      <el-input v-model="sizeNumber" placeholder="大小"/>
      <el-select v-model="sizeSuffix" class="m-2" placeholder="Select">
        <el-option
            v-for="s in sizeSuffixType"
            :key="s.value"
            :label="s.label"
            :value="s.value"
        />
      </el-select>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="changeStorageSize">修改</el-button>
      </span>
      </template>
    </el-dialog>
  </div>


  <el-pagination background layout="prev, pager, next" :total="total"
  style="position: absolute;bottom: 33px" v-model:current-page="user.pageNo" v-model:page-size="user.pageSize"
  @current-change="changeCurrentPage"/>

</template>


<script setup>
import {onMounted, ref} from "vue";
import {
  changeUserStorageSize,
  deleteById,
  deleteByIds, freezeUserById,
  freezeUsersByIds, resetPass,
  unFreezeUserById,
  unFreezeUsersByIds,
  userPageListAndSearch
} from "../../apis/UserApi.js";
import {elPrompt} from "../../utils/elPrompt.ts";
import showSize from "../../utils/showSize.js";
import {freezeDocumentsByUserId, unFreezeDocumentsByUserId} from "../../apis/DocumentApi.js";

const tableData = ref()
const total = ref(10)
const users={ids:[]}
const user = ref({
  username:'',
  phone:'',
  email:'',
  pageSize:10,
  pageNo:1
})

function selected(value){
  users.ids = []
  for (let index in value){
    users.ids.push(value[index].id)
  }
}


function freezeUsers(){
  freezeUsersByIds(users,(result)=>{
    if (result.status === 200){
      elPrompt("批量冻结成功","success")
    }else {
      elPrompt("批量冻结失败","error")
    }
    userPage()
  })
}


function freezeUser(id){
  freezeUserById(id,(result)=>{
    if (result.status === 200){
      elPrompt("冻结成功","success")
    }else {
      elPrompt("冻结失败","error")
    }
    userPage()
  })
}


function unFreezeUser(id){
  unFreezeUserById(id,(result)=>{
    if (result.status === 200){
      elPrompt("解冻成功","success")
    }else {
      elPrompt("解冻失败","error")
    }
    userPage()
  })
}


function unfreezeUsers(){
  unFreezeUsersByIds(users,(result)=>{
    if (result.status === 200){
      elPrompt("批量解冻成功","success")
    }else {
      elPrompt("批量解冻失败","error")
    }
    userPage()
  })
}

function deleteUser(id){
  deleteById(id,(result)=>{
    if (result.status === 200){
      elPrompt("删除成功","success")
    }else {
      elPrompt("删除失败","error")
    }
    userPage()
  })
}


function deleteUsers(){
  if (result.status === 200){
    elPrompt("批量删除成功","success")
  }else {
    elPrompt("批量删除失败","error")
  }
  deleteByIds(users,(result)=>{
    userPage()
  })
}

async function resetPassword(id) {
  await resetPass(id, (result) => {
    if (result.status === 200) {
      userPage()
      elPrompt("操作成功！", "success")
    }else {
      elPrompt(result.message,"error");
    }
  })
}


function changeCurrentPage(pageNumber){
  user.value.pageNo = pageNumber
  userPage();
}

function userPage(){
  userPageListAndSearch(user.value,(result)=>{
    tableData.value = result.data.dataLists
    total.value = result.data.total
  })
}


function reset(){
  user.value.username = null;
  user.value.phone = null;
  user.value.email = null;
  userPage();
}

onMounted(()=>{
  userPage()
})

async function freezeUserDocuments(userId) {
  await freezeDocumentsByUserId(userId, (result) => {
    if (result.status !== 200) return elPrompt(result.message, "error")
    elPrompt('冻结该用户所有文档！', "success")
  })
}

async function unFreezeUserDocuments(userId) {
  await unFreezeDocumentsByUserId(userId, (result) => {
    if (result.status !== 200) return elPrompt(result.message, "error")
    elPrompt("成功解冻该用户所有文档！", "success")
  })
}

const dialogVisible = ref(false)
const dialogTitle = ref('修改用户的存储空间大小')
const sizeNumber = ref(0)
const sizeSuffix = ref(1024)
const willChangeUser = ref()
const sizeSuffixType = {
  B: {label: 'B', value: Math.pow(1024,0)},
  KB: {label: 'KB', value: Math.pow(1024,1)},
  MB: {label: 'MB', value: Math.pow(1024,2)},
  GB: {label: 'GB', value: Math.pow(1024,3)},
  TB: {label: 'TB', value: Math.pow(1024,4)},
  PB: {label: 'PB', value: Math.pow(1024,5)},
}

async function beforeChangeUserStorageSize(user) {
  willChangeUser.value = user
  const matches = showSize(user.storageSize).match(/([\d.]+)([A-Za-z]+)/);
  if (!matches) return elPrompt('异常！', "error")
  const number = matches[1]; // 提取数字部分
  const letter = matches[2]; // 提取字母部分
  sizeNumber.value = parseFloat(number)
  sizeSuffix.value = sizeSuffixType[letter].value
  dialogTitle.value = `修改用户${user.username}的存储空间大小`
  dialogVisible.value = true
}
async function changeStorageSize() {
  willChangeUser.value.storageSize = sizeNumber.value * sizeSuffix.value
  await changeUserStorageSize(willChangeUser.value, (result) => {
    if (result.status !== 200) return elPrompt(result.message, "error")
    elPrompt('修改成功！', "success")
    dialogVisible.value = false
    userPage()
  })
}
</script>



<style scoped lang="less">
.admin-home {
  h1 {
    text-align: center;
  }
}
.click {
  &:hover {
    color: var(--color-danger);
    font-weight: bold;
  }
}
</style>
